import { animated, useSpring, useSprings, useSpringValue } from "@react-spring/web";
import { useEffect } from "react";
import './index.css'

export default function SpringTest3() {
    // const [springs, api] = useSprings(3, () => ({
    //     from: {
    //         width: 0
    //     },
    //     to: {
    //         width: 300
    //     },
    //     config: {
    //         duration: 2000
    //     }
    // }))

    const [springs, api] = useSprings(
        3,
        () => ({
          from: { width: 0 },
          config: {
            duration: 1000
          }
        })
      )
    
      useEffect(() => {
        api.start({ width: 300 });
      }, [])

    

    return <div>
        {springs.map(styles => (
            <animated.div className="box" style={{...styles}} ></animated.div>
        ))}
    </div>  
}